$(function () {
    console.log($('.box'))
    // bind/unbind on/off
    // $('.box').on('tap', function () {
    //   this.style.backgroundColor = 'blue'
    // })
    //
    // $('.box').click(function () {
    //   this.style.backgroundColor = 'blue'
    //   $(this).css({ width: '1.5rem', height: '1.5rem' })
    // })

    //swipe
    $('.box').on('swipeleft', function () {
        this.style.backgroundColor = 'blue'
    })

    //box
    let top = parseFloat($('.box').css('top'))
    let left = parseFloat($('.box').css('left'))
    $('.box').on('drag', function (e) {
        let x = e.detail.distanceX
        let y = e.detail.distanceY
        $('.box').css({
            top: y + top,
            left: x + left
        })
    })
    $('.box').on('dragend', function (e) {
        let x = e.detail.distanceX
        let y = e.detail.distanceY
        top += y
        left += x
    })

    //动画效果
    $('.box').animate({
        width:'3rem',
        height:'3rem',
    },1000,function(){
        console.log('动画结束')
    })
})